<template>
  <div class="sortPage">
    <newsBar></newsBar>
    <div class="news" v-show="isShow">
      <div class="news-item-box">
        <p class="news-title">
          <span>{{newsInfo.title}}</span>
        </p>
        <p class="news-control clearfix">
          <span class="news-ly fl">{{newsInfo.copyfrom}}</span>
          <span class="news-ydl fl">
            <van-icon color="rgba(136,137,141,1)" class="icon-ydl" name="eye-o" />
            {{newsInfo.hits}}
          </span>
          <span class="news-time fr">{{newsInfo.addtime}}</span>
        </p>
      </div>

      <div v-if="isLogin">
        <pdfDom v-if="newsInfo.filetype=='pdf'  " :urls="newsInfo.fileurl"></pdfDom>
        <vedioDom
          style="margin:.3rem 0"
          v-else-if="newsInfo.filetype=='video' "
          :src="newsInfo.fileurl"
          :img="newsInfo.bg_img"
        ></vedioDom>
        <audioDom
          style="margin:.3rem 0"
          v-else-if="newsInfo.filetype=='audio' "
          :src="newsInfo.fileurl"
            :img="newsInfo.bg_img"
        ></audioDom>
        <div v-if="newsInfo.filetype=='normal' ">
          <div class="news-content" id="newscontent" v-html="newsInfo.content"></div>
        </div>
        <div v-if="newsInfo.filetype !='normal'">
          <div class="newsfiletype">{{newsInfo.introduce}}</div>
          <div
            style="min-height: inherit;"
            class="news-content"
            id="newscontent"
            v-html="newsInfo.content"
          ></div>
        </div>
        <scaleImg :content="newsInfo.content"></scaleImg>
      </div>
      <login-from v-if="!isLogin"></login-from>
      <partmorennews :titleConfig="titleConfig" class="border-top" :limit="5"></partmorennews>
    </div>
    <notMember></notMember>
  </div>
</template>

<script type="text/ecmascript-6">
import vedioDom from "../../directive/vedio.vue";
import pdfDom from "../../directive/pdf.vue";
import audioDom from "../../directive/audio";
import partmorennews from "../../components/newslist/hotNews";
import { getnewsDetail } from "../../api/sort";
import loginFrom from "../../components/login/index";
import utils from "../../assets/js/util";
import newsBar from "../../components/nav/newsbar";
import notMember from "../../components/price/notMember";
import scaleImg from "../../components/scaleImg";
export default {
  components: {
    scaleImg,
    partmorennews,
    loginFrom,
    newsBar,
    notMember,
    vedioDom,
    audioDom,
    pdfDom
  },
  data() {
    return {
      phoneNum: this.$store.state.nocaches.kefuphone,
      isShow: false, //是否展示dom页面
      newsInfo: {},
      isLogin: false,
      titleConfig: { title: "热门文章" }
    };
  },
  watch: {
    $route(to, from) {
      this.getNews();
    }
  },
  methods: {
    getNews() {
      getnewsDetail(this.$route.query).then(res => {
        this.newsInfo = {};
        this.isShow = true;
        if (res.code == "0007") {
          this.newsInfo = res.data;
         
          this.$toast(res.msg);
        } else if (res.code == "0000") {
          this.isLogin = true;
          this.newsInfo = res.data;
          this.$nextTick(function() {
            var w = document.querySelector(".news-item-box").clientWidth;
            if (this.newsInfo.filetype == "pdf") {
              var heightHead = document.querySelector(".van-nav-bar")
                .clientHeight;
              var heighttitle = document.querySelector(".news-item-box")
                .offsetHeight;
              var heightfoot = document.querySelector(
                ".van-hairline--top-bottom "
              ).offsetHeight;
              var heightnewL = 70;
              var bodtHright = document.querySelector("body").clientHeight;
              var h =
                bodtHright -
                (heightHead + heighttitle + heightfoot + heightnewL + 20);
              document.querySelector("#demo").style.height = h + "px";
            }
          });
        } else if (res.code == "0008") {
          this.newsInfo = res.data || {};
        } else if (res.code == "1102") {
          this.newsInfo = res.data;
          this.newsInfo.content = `  <p class="member" v-if="notMember" >
            尊敬的用户，您的会员可能已过期或者未开通该频道的权限，请拨打服务热线
            <a style="  color: #e49829;" href="tel:${this.phoneNum}">${this.phoneNum}</a>
            寻求帮助
          </p>`;
          this.isLogin = true;
          this.$store.commit("munotMember", {
            notMember: true, //是否是该频道会员
            notMembershow: true
          });
        } else {
          this.newsInfo = res.data || {};
          this.$toast(res.msg);
        }
      });
    }
  },
  created() {
    this.getNews();
  }
};
</script>
<style scoped lang="less">
.sortPage {
  background: #ffffff;
  min-height: 100%;
}
.news {
  // background: #ffffff;
  padding: 0.3rem;
  .newsfiletype {
    line-height: 1.5;
  }
}
.news-item-box {
  border-bottom: 0.01rem dashed rgba(216, 216, 216, 1);
  padding-bottom: 0.3rem;
  color: rgba(21, 23, 35, 1);
  .icon-ding {
    width: 0.3rem;
    height: 0.3rem;
    display: none;
  }
}
.news-title {
  font-size: 0.36rem;
  line-height: 0.54rem;
  max-height: 1.1rem;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(21, 23, 35, 1);
}
.news-control {
  color: rgba(136, 137, 141, 1);
  font-size: 0.22rem;
  .news-ly {
    padding-right: 0.12rem;
    border-right: 0.01rem solid rgba(136, 137, 141, 1);
  }
  .news-ydl {
    padding-left: 0.12rem;
    font-size: 0.2rem;
  }
  .icon-ydl {
    margin-right: 0.05rem;
  }
}
.news-content {
  padding: 0.3rem 0;
  font-size: 0.3rem;
  color: rgba(110, 111, 117, 1);
  line-height: 0.54rem;
  min-height: 7rem;
  overflow-x: auto;
}
.member {
  line-height: 1.5;
  padding: 0.3rem 0;
  font-size: 0.3rem;
  a {
    color: #e49829;
  }
}
</style>
